<template>
    <div class="app-container margin-right12" style="padding:0">
      <div class="main-page">
         <div class="left-part">
          
         </div>

        <div class="right-part">
          <el-form :inline="true" :model="form">
            <el-form-item label="器械名" label-width="56px">
              <el-select
                v-model="form.device"
                placeholder="器械"
                style="width:100px"
                clearable
              >
              
                <el-option :label="item.deviceName" :value="item.deviceId" v-for="item in devicemanageList" :key="item.deviceId" />
              </el-select>
            </el-form-item>
             <el-form-item label="术前数量" label-width="68px">
              <el-input style="width:60px" v-model="form.beforeNum" placeholder="术前数量" />
            </el-form-item>
             <el-form-item label="术中数量" label-width="68px">
              <el-input style="width:60px" v-model="form.ingNum" placeholder="术中数量" />
            </el-form-item>
             <el-form-item label="器械包" label-width="55px">
              <el-select
                v-model="form.region"
                placeholder="器械包"
                style="width:100px"
                clearable
              >
              
                <el-option :label="item.deviceName" :value="item.deviceId" v-for="item in devicemanageList" :key="item.deviceId" />
              </el-select>
            </el-form-item>
           
            <el-form-item>
              <el-button type="primary" @click="add">新增器械</el-button>
              <el-button type="primary" @click="addTbale">新增清点单</el-button>
              <el-button type="primary" @click="submitDevice">提交当前清点单</el-button>
            </el-form-item>
          </el-form>






          <el-carousel ref="carousel" @change="tableChange" :autoplay="false">
            <el-carousel-item v-for="item in tableList" :key="item.surgeryDeviceId">
               <el-table :data="item.surgeryDeviceDetailList" style="width: 100%">
                  <el-table-column align="center" type="index"  label="序号"  width="55" />
                  <el-table-column align="center" label="名称" prop="deviceName" width="60" />
                  <el-table-column align="center" prop="beforeOperatioNnum">
                    <template #header>
                      
                      <el-popover :visible="item.beforeoperationVisible" placement="bottom" :width="400" >
                        <template #reference>
                          <el-button @click="openPopover(1,item)" type="primary" plain round>开台数量</el-button>
                        </template>
                        <div class="flex-wrap">
                          <div class="label">
                            开台时间：
                          </div>
                          <div class="content">
                            <el-date-picker
                                v-model="checkInfo.startTime"
                                type="datetime"
                                :clearable="false"
                                placeholder="开台时间"
                              />
                          </div>
                        </div>
                        <div class="flex-wrap">
                          <div class="label">
                            开台清点时间：
                          </div>
                          <div class="content">
                            <el-date-picker
                                v-model="checkInfo.checkTime"
                                type="datetime"
                                :clearable="false"
                                placeholder="开台清点时间"
                              />
                          </div>
                        </div>
                        <div class="flex-wrap">
                          <div class="label">
                            器械包选择：
                          </div>
                          <div class="content">
                            <el-date-picker
                                v-model="form.x"
                                type="datetime"
                                placeholder="器械包选择"
                              />
                          </div>
                        </div>
                        <div class="flex-wrap" style="justify-content: flex-end;">
                          <el-button  @click="item.beforeoperationVisible=false" size="mini">取消</el-button>
                          <el-button type="primary" size="mini">保存</el-button>
                        </div>
                      </el-popover>
                    </template>
                    <template #default="scope">
                    
                      <el-input style="width:100%" v-model="scope.row.beforeOperatioNnum"></el-input>
                    </template>
                  </el-table-column>
                  <el-table-column align="center" label="术中增减" prop="ingNum" width="120">
                    <template #default="scope">
                    <el-popover :visible="scope.row.operationVisible" placement="bottom" :width="360" >
                        <template #reference>
                          <el-button @click="scope.row.operationVisible=true" type="primary" link>{{ scope.row.surgeryDeviceIncreasementList?1:0 }}</el-button>
                        </template>


                        

                        <div style="font-weight:bold;color:#333;padding-bottom:4px">{{ scope.row.deviceName }}</div>


                       <div style="display:flex;justify-content: space-between;">

                        <div class="flex-wrap">
                        
                          <div class="content">
                            <el-input
                              v-model="scope.row.add"
                              style="width: 160px"
                              placeholder=""
                              class="input-with-select"
                            >
                              <template #prepend>
                                <span style="color:blue;font-weight:bold">加</span>
                              </template>
                              <template #append>
                               <div  @click="changeDeviceNum(scope.row,1)">保存</div>
                              </template>
                            </el-input>
                          </div>
                        </div>
                        <div class="flex-wrap">
                        
                          <div class="content">
                             <el-input
                                v-model="scope.row.reduce‌"
                                style="width: 160px"
                                placeholder=""
                                class="input-with-select"
                              >
                                <template #prepend>
                                 
                                 <span style="color:blue;font-weight:bold">减</span>
                                </template>
                                <template #append>
                                 <div  @click="changeDeviceNum(scope.row,2)">保存</div>
                                </template>
                              </el-input>
                          </div>
                        </div>

                       </div>
                      
                       
                      </el-popover>
                    </template>
                  </el-table-column>
                  <el-table-column align="center" prop="preantralNum">
                    <template #header>
                    <el-popover placement="bottom" :visible="item.preantralVisible"  :width="400" >
                        <template #reference>
                          <el-button type="primary" @click="openPopover(2,item)" plain round>关体腔前</el-button>
                        </template>
                        <div class="flex-wrap">
                          <div class="label">
                            关体腔前时间：
                          </div>
                          <div class="content">
                            <el-date-picker
                                v-model="checkInfo.startTime"
                                type="datetime"
                                :clearable="false"
                                placeholder="关体腔前时间"
                              />
                          </div>
                        </div>
                        <div class="flex-wrap">
                          <div class="label">
                            关体腔前清点时间：
                          </div>
                          <div class="content">
                            <el-date-picker
                                v-model="checkInfo.checkTime"
                                type="datetime"
                                :clearable="false"
                                placeholder="关体腔前清点时间"
                              />
                          </div>
                        </div>
                      
                        <div class="flex-wrap" style="justify-content: flex-end;">
                          <el-button  @click="item.preantralVisible=false" size="mini">取消</el-button>
                          <el-button type="primary" size="mini">保存</el-button>
                        </div>
                      </el-popover>
                    </template>
                  </el-table-column>
                  <el-table-column align="center" prop="cavityNum">
                    <template #header>
                    <el-popover placement="bottom" :visible="item.cavityVisible"  :width="400" >
                        <template #reference>
                          <el-button @click="openPopover(3,item)" type="primary" plain round>关体腔后</el-button>
                        </template>
                        <div class="flex-wrap">
                          <div class="label">
                            关体腔后时间：
                          </div>
                          <div class="content">
                            <el-date-picker
                                v-model="checkInfo.startTime"
                                type="datetime"
                                :clearable="false"
                                placeholder="关体腔后时间"
                              />
                          </div>
                        </div>
                        <div class="flex-wrap">
                          <div class="label">
                            关体腔后清点时间：
                          </div>
                          <div class="content">
                            <el-date-picker
                                v-model="checkInfo.checkTime"
                                type="datetime"
                                :clearable="false"
                                placeholder="关体腔后清点时间"
                              />
                          </div>
                        </div>
                      
                        <div class="flex-wrap" style="justify-content: flex-end;">
                          <el-button  @click="item.cavityVisible=false" size="mini">取消</el-button>
                          <el-button type="primary" size="mini">保存</el-button>
                        </div>
                      </el-popover>
                    </template>
                  </el-table-column>
                  <el-table-column align="center" prop="afterSkinNum">
                    <template #header>
                      <el-popover placement="bottom" :visible="item.aftersewingskinVisible" :width="400" >
                        <template #reference>
                          <el-button @click="openPopover(4,item)" type="primary" plain round>皮肤缝合后</el-button>
                        </template>
                        <div class="flex-wrap">
                          <div class="label">
                            皮肤缝合后时间：
                          </div>
                          <div class="content">
                            <el-date-picker
                                v-model="checkInfo.startTime"
                                type="datetime"
                                :clearable="false"
                                placeholder="皮肤缝合后时间"
                              />
                          </div>
                        </div>
                        <div class="flex-wrap">
                          <div class="label">
                            皮肤缝合后清点时间：
                          </div>
                          <div class="content">
                            <el-date-picker
                                v-model="checkInfo.checkTime"
                                type="datetime"
                                :clearable="false"
                                placeholder="皮肤缝合后清点时间"
                              />
                          </div>
                        </div>
                        
                        <div class="flex-wrap" style="justify-content: flex-end;">
                          <el-button  @click="item.aftersewingskinVisible=false" size="mini">取消</el-button>
                          <el-button type="primary" @click="storeEvent()"  size="mini">保存</el-button>
                        </div>
                      </el-popover>
                    </template>
                    
                  </el-table-column>
                  <el-table-column label="操作" align="center"  width="130">
                    <template #header>

                      <el-popconfirm
                        confirm-button-text="确定"
                        cancel-button-text="取消"
                        :icon="InfoFilled"
                        icon-color="#626AEF"
                        title="确定删除吗?"
                        @confirm="delTable"
                      >
                        <template #reference>
                           <el-button round size="mini"  type="danger">删除清点单</el-button>
                        </template>
                      </el-popconfirm>
                    </template>
                    <template #default="scope">
                    
                      <el-button
                        size="small"
                        link
                        type="danger"
                        @click="handleDelete(scope.$index, scope.row)"
                      >
                        删除
                      </el-button>
                    </template>
                  </el-table-column>
                </el-table>
            </el-carousel-item>
          </el-carousel>



         
        
          
        </div>

      </div>

     
       
       
    </div>
  </template>
  
  <script setup>
  import { listDevicemanage } from "@/api/manage/devicemanage";
  import { addSurgurydevice,listSurgurydevice,delSurgurydevice } from "@/api/manage/surgurydevice";
  import { delDevicedetail,addDevicedetail } from "@/api/manage/devicedetail";
  
  const { proxy } = getCurrentInstance();
  import useSurgeryingStore from '@/store/modules/surgerying'
  const eventmanageList = ref([]);
  const loading = ref(true);
  let devicemanageList=ref([]);
  let tableList=ref([]);
  const carousel = ref(null)
  const form = reactive({
    device: '',
    beforeNum: 1,
    ingNum: 1,
  })
  let tablePage=0;

  let checkInfo=ref({})
  /***删除清点单***/
  function delTable(){
    delSurgurydevice([tableList.value[tablePage].surgeryDeviceId]).then(response => {
      proxy.$modal.msgSuccess("操作成功");
      getTableList();
      loading.value = false;
    });
  }

  /**OPEN popover***/

  function openPopover(type,item){
    switch(type){
      case 1:
        item.beforeoperationVisible=true
        item.preantralVisible=false
        item.cavityVisible=false
        item.aftersewingskinVisible=false
        
        break;
      case 2:
        item.beforeoperationVisible=false
        item.preantralVisible=true
        item.cavityVisible=false
        item.aftersewingskinVisible=false
        break;
      case 3:
        item.beforeoperationVisible=false
        item.preantralVisible=false
        item.cavityVisible=true
        item.aftersewingskinVisible=false
        break;
      case 4:
        item.beforeoperationVisible=false
        item.preantralVisible=false
        item.cavityVisible=false
        item.aftersewingskinVisible=true
        break;

    }
  }


  /****删除表格记录****/

  function handleDelete(index,row){

    console.log(row)

     delDevicedetail([row.surgeryDeviceDetailId]).then(response => {
      proxy.$modal.msgSuccess("操作成功");
      getTableList()
      loading.value = false;
    });
  }
  
  /***表格切换****/

  function tableChange(page){
    tablePage=page
  }

  /**修改设备术中数量***/

  function changeDeviceNum(item,type){
    
    let transData=JSON.parse(JSON.stringify(item));
    if(item.surgeryDeviceIncreasementList==null){
      transData.surgeryDeviceIncreasementList=[]
    }
    transData.surgeryDeviceIncreasementList.push({
      surgeryDeviceDetailId:item.surgeryDeviceDetailId,
      addNum:type==1?item.add:item.reduce,
      sign:type==1?1:-1
    })
    addDevicedetail([transData]).then(response => {
      getTableList()
      proxy.$modal.msgSuccess("操作成功");
      loading.value = false;
    });
  }

/** 查询器械信息列表 */
function getList() {
  loading.value = true;
  listDevicemanage({
    pageNum:1,
    pageSize:100
  }).then(response => {
    devicemanageList.value = response.rows;
    loading.value = false;
  });
}

function getTableList(refresh){
  loading.value = true;
  listSurgurydevice({
    pageNum:1,
    pageSize:5
  }).then(response => {
   
    tableList.value = response.rows.map(item=>{
      item.surgeryDeviceDetailList=!item.surgeryDeviceDetailList?[]:item.surgeryDeviceDetailList
      item.aftersewingskinVisible=false
      item.cavityVisible=false
      item.preantralVisible=false
      item.beforeoperationVisible=false
      return item;
    })
    loading.value = false;

    if(refresh){
      carousel.value.setActiveItem(tableList.value.length-1)
    }
  });
}


function add(){
  if(!form.device){
    proxy.$modal.msgSuccess("未选择器械");
    return
  }
  let device=devicemanageList.value.filter(item=>{
    return item.deviceId==form.device
  })
  tableList.value[tablePage].surgeryDeviceDetailList.push({
    surgeryDeviceId:tableList.value[tablePage].surgeryDeviceId,
    surgeryId:useSurgeryingStore().surgerying.surgeryId,
    surgeryDeviceIncreasementList:[],
    ingNum:form.ingNum,
    cavityNum:0,
    afterSkinNum:0,
    preantralNum:0,
    beforeOperatioNnum:form.beforeNum,
    deviceName:device[0].deviceName,
    deviceId:device[0].deviceId
  })
}

 /**新增清点单****/
 function addTbale(){
  addSurgurydevice({surgeryId:useSurgeryingStore().surgerying.surgeryId,}).then(response => {
    getTableList(true)
     proxy.$modal.msgSuccess("操作成功");
    loading.value = false;
  });

 }

 function submitDevice(){
 
  let transData=JSON.parse(JSON.stringify(tableList.value[tablePage]));

  if(transData.surgeryDeviceDetailList.length==0){
    proxy.$modal.msgWarning("器械列表数据为空");
    return
  }

  addDevicedetail(transData.surgeryDeviceDetailList).then(response => {
    getTableList()
    proxy.$modal.msgSuccess("操作成功");
    loading.value = false;
  });
 }

  getTableList()
  getList();
  </script>

  <style lang="scss">
  .flex-wrap{
    .content{
      .el-input-group__append{
        background:#409eff;
        color:#fff;
        cursor:pointer;
        padding:0 10px;
      }
    }
  }
  .el-carousel__container{
    height:100%;
  }
  .el-carousel__button{
    background:#409eff;
    height:20px;
  }
  .el-carousel{
    height:calc(100% - 50px);
   
  }
    .margin-right12{
      .el-form--inline .el-form-item{
        margin-right:12px!important;
      }
    }
  </style>

  <style lang="scss" scoped>
    .flex-wrap{
      display:flex;
      align-items: center;
      margin-bottom:4px;
      .label{
        width:140px;
      }
      .content{
        flex:1;
      }
    }
    .app-container{
      height:100%;
    }
    .main-page{
      height:100%;
      display:flex;
      .left-part{
        box-sizing: border-box;
        padding-top:10px;
        height:100%;
        overflow: auto;
        margin-right:18px;
      }
      .right-part{
        flex:1;
        height:100%;
        overflow: auto;
      }
    }
    
  </style>


  